<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-02-28 15:06:23
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-10 14:01:56
-->
<template>
  <div>
    <el-dialog
      title="批量新建回款计划"
      :visible.sync="dialog.newBatchShow"
      width="50%"
      @close="batchClose"
    >
      <el-form
        :model="planForm"
        ref="planForm"
        :rules="planRules"
        label-position="top"
      >
        <div class="basics">基础信息</div>
        <div class="formItem">
          <div class="formItem-top">
            <el-form-item label="客户名称" prop="customer">
              <el-input
                v-model="planForm.customer"
                @focus="customerAdd"
                placeholder="+ 添加"
              ></el-input>
            </el-form-item>
            <el-form-item label="合同名称" prop="contract">
              <el-input
                v-model="planForm.contract"
                @focus="contractAdd"
                placeholder="+ 添加"
              ></el-input>
            </el-form-item>
            <el-form-item label="计划回款条数" prop="number">
              <el-input
                v-model="planForm.number"
                placeholder="请输入计划回款条数"
              ></el-input>
            </el-form-item>
            <el-form-item label="计划回款金额" prop="planAmount">
              <el-input
                v-model="planForm.planAmount"
                placeholder="请输入计划回款金额"
              ></el-input>
            </el-form-item>
          </div>
          <el-form-item label="计划回款日期" prop="radio">
            <el-radio v-model="planForm.radio" label="1">
              循环设置日期
            </el-radio>
            <el-radio v-model="planForm.radio" label="2">
              自定义日期(多选)
            </el-radio>
            <div class="formItem-content" v-if="planForm.radio == 1">
              <span>从</span>
              <el-date-picker
                :clearable="true"
                v-model="planForm.time"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 160px; margin: 0 5px"
              ></el-date-picker>
              <span>开始，每</span>
              <el-input
                v-model="planForm.dayNum"
                style="width: 80px; margin: 0 5px"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
              <el-select
                v-model="planForm.dayType"
                style="width: 80px; margin-right: 5px"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span>回款一次</span>
              <div class="timeS">{{ timeStr }}</div>
            </div>
            <div class="formItem-content" v-else>
              <el-tag
                :key="tag"
                v-for="tag in planForm.timeData"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-date-picker
                :clearable="true"
                type="date"
                placeholder="请选择还款日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                class="input-new-tag"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                style="width: 160px"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <div class="formItem-bottom">
            <el-form-item label="计划回款方式" prop="type">
              <el-select
                v-model="planForm.type"
                placeholder="请选择选择回款方式"
              >
                <el-option
                  v-for="item in payOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提前几天提醒">
              <el-input
                v-model="planForm.remind"
                placeholder="请输入提前几天"
                type="number"
              ></el-input>
            </el-form-item>

            <el-form-item label="备注">
              <el-input
                type="textarea"
                rows="3"
                v-model="planForm.remark"
                style="width: 330px"
              ></el-input>
            </el-form-item>
            <el-form-item> </el-form-item>
          </div>
        </div>
        <div>
          <el-button type="primary" size="default" @click="application"
            >应用
          </el-button>
          <span style="color: red">点击应用后可保存</span>
        </div>
        <div class="vxeDate" v-if="tableShow">
          <vxe-table
            border
            resizable
            show-overflow
            :data="tableData"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <vxe-column
              field="date"
              title="计划回款日期"
              :edit-render="{ name: '$input', props: { type: 'date' } }"
            ></vxe-column>
            <vxe-column
              field="planAmount"
              title="计划回款金额"
              :edit-render="{ name: 'input', attrs: { type: 'number' } }"
            >
            </vxe-column>
            <vxe-table-column
              field="type"
              title="计划回款方式"
              :edit-render="{ name: 'select', options: options }"
            ></vxe-table-column>
            <vxe-column
              field="remind"
              title="提前几天提醒"
              :edit-render="{ name: 'input', attrs: { type: 'number' } }"
            ></vxe-column>
            <vxe-column
              field="remark"
              title="备注"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-table-column title="操作" width="100" show-overflow>
              <template v-slot="{ row }">
                <i class="iconfont icon-ashbin vxeI" @click="delTime(row)"></i>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </el-form>
      <span slot="footer">
        <el-button @click="dialog.newBatchShow = false">取消</el-button>
        <el-button type="primary" @click="submit" :disabled="!tableShow">
          保存
        </el-button>
      </span>
    </el-dialog>
    <customer :dialog="dialog" v-if="dialog.customerShowEject"></customer>
    <contract :dialog="dialog" v-if="dialog.contractShowEject"></contract>
  </div>
</template>

<script>
import { timeToggle } from "../../../../utils/timeToggle";
import { planBatchInsert } from "../../../../api/CRM/xshk";
import customer from "../CRM/customer.vue";
import Contract from "../CRM/contract.vue";
export default {
  components: { customer, Contract },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tableShow: false,
      tableData: [],
      timeStr: "",
      options: [
        {
          value: 1,
          label: "微信支付",
        },
        { value: 2, label: "支付宝支付" },
        { value: 3, label: "网银支付" },
        { value: 4, label: "其他" },
      ],
      payOptions: [
        {
          value: 1,
          label: "微信支付",
        },
        { value: 2, label: "支付宝支付" },
        { value: 3, label: "网银支付" },
        { value: 4, label: "其他" },
      ],

      planRules: {
        customer: [
          {
            required: true,
            message: "请选择客户名称",
          },
        ],
        contract: [
          {
            required: true,
            message: "请选择合同名称",
          },
        ],
        planAmount: [
          {
            required: true,
            message: "请输入回款金额",
            trigger: "blur",
          },
        ],
        number: [
          {
            required: true,
            message: "请输入回款条数",
            trigger: "blur",
          },
        ],
        date: [
          {
            required: true,
            message: "请选择回款日期",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择回款方式",
          },
        ],
        radio: [
          {
            required: true,
            message: "请选择回款日期方式",
            trigger: "change",
          },
        ],
      },
      dates: [
        {
          date: new Date(),
        },
      ],
      selected: {},
      planForm: {
        customerId: "",
        customer: "",
        contractId: "",
        contract: "",
        amount: "",
        planAmount: "",
        date: "",
        remind: "",
        type: "",
        remark: "",
        number: "",
        radio: "1",
        time: this.getNowTime(), //日期
        dayNum: "1",
        dayType: "1",
        timeData: [],
      },

      inputValue: "",
      typeOptions: [
        {
          value: "1",
          label: "日",
        },
        {
          value: "2",
          label: "周",
        },
        {
          value: "3",
          label: "月",
        },
        {
          value: "4",
          label: "年",
        },
      ],
    };
  },
  watch: {
    "planForm.number": {
      deep: true,
      handler(val) {
        this.timeStr = "";
        this.planForm.timeData = timeToggle(
          this.planForm.time,
          this.planForm.number,
          this.planForm.dayType,
          this.planForm.dayNum
        );
        this.planForm.timeData.forEach((item) => {
          this.timeStr += item + "，";
        });
        this.timeStr = this.timeStr.substring(this.timeStr.length - 1, 0);
      },
    },
    "planForm.time": {
      deep: true,
      handler(val) {
        this.timeStr = "";
        this.planForm.timeData = timeToggle(
          this.planForm.time,
          this.planForm.number,
          this.planForm.dayType,
          this.planForm.dayNum
        );
        this.planForm.timeData.forEach((item) => {
          this.timeStr += item + "，";
        });
        this.tableShow = false;
        this.timeStr = this.timeStr.substring(this.timeStr.length - 1, 0);
      },
    },
    "planForm.dayNum": {
      deep: true,
      handler(val) {
        this.timeStr = "";
        this.planForm.timeData = timeToggle(
          this.planForm.time,
          this.planForm.number,
          this.planForm.dayType,
          this.planForm.dayNum
        );
        this.planForm.timeData.forEach((item) => {
          this.timeStr += item + "，";
        });
        this.tableShow = false;
        this.timeStr = this.timeStr.substring(this.timeStr.length - 1, 0);
      },
    },
    "planForm.dayType": {
      deep: true,
      handler(val) {
        this.timeStr = "";
        this.planForm.timeData = timeToggle(
          this.planForm.time,
          this.planForm.number,
          this.planForm.dayType,
          this.planForm.dayNum
        );
        this.planForm.timeData.forEach((item) => {
          this.timeStr += item + "，";
        });
        this.tableShow = false;
        this.timeStr = this.timeStr.substring(this.timeStr.length - 1, 0);
      },
    },
    "planForm.radio": {
      deep: true,
      handler(val) {
        this.planForm.timeData = [];
        this.tableShow = false;
      },
    },
  },
  methods: {
    // 删除
    delTime(row) {
      this.planForm.timeData.forEach((item, index) => {
        if (item == row.date) {
          this.planForm.timeData.splice(index, 1);
          this.planForm.number--;
          this.application();
        }
      });
    },
    // 应用
    application() {
      this.tableShow = true;
      this.tableData = [];
      this.planForm.timeData.forEach((item) => {
        this.tableData.push({
          customerId: this.planForm.customerId,
          contractId: this.planForm.contractId,
          amount: this.planForm.amount,
          planAmount: this.planForm.planAmount,
          date: item,
          remind: this.planForm.remind,
          type: this.planForm.type,
          remark: this.planForm.remark,
        });
      });
    },
    // 合同添加
    contractAdd() {
      if (this.planForm.customerId == "") {
        this.$message.info("请先选择客户");
      } else {
        this.dialog.contractShowEject = true;
        this.$nextTick(function () {
          this.dialog.contractShow = true;
        });
      }
    },
    // 客户添加
    customerAdd() {
      this.dialog.customerShowEject = true;
      this.$nextTick(function () {
        this.dialog.customerShow = true;
      });
    },
    handleClose(tag) {
      this.planForm.timeData.splice(this.planForm.timeData.indexOf(tag), 1);
      this.tableShow = false;
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (this.planForm.timeData.indexOf(inputValue) == -1)
          this.planForm.timeData.push(inputValue);
      }
      this.inputValue = "";
    },
    //处理默认选中当前日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      console.log(defaultDate);
      // this.$set(this.planForm, "stockDate", defaultDate);
      return defaultDate;
    },

    // 关闭新建回款计划
    batchClose() {
      this.dialog.newBatchShowEject = false;
      this.timeStr = "";
      this.tableData = false;
    },
    // 增加审核人
    onAdd() {},
    // 提交审核
    submit() {
      this.$refs["planForm"].validate((valid) => {
        if (!valid) return;
        let fd = new FormData();
        fd.append("crmRecoveryPlans", JSON.stringify(this.tableData));
        planBatchInsert(fd).then((res) => {
          this.$message.success(res.msg);
          this.dialog.newBatchShow = false;
          this.$parent.getPlanList();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  .formItem {
    .formItem-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      display: flex;
      /deep/.el-form-item {
        width: 48%;
        .el-input__inner {
          width: 330px;
        }
      }
    }
    .formItem-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      display: flex;
      /deep/.el-form-item {
        width: 48%;
        .el-input__inner {
          width: 330px;
        }
      }
    }
  }
}
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.approve {
  display: flex;
  flex-wrap: wrap;
}
.examine {
  display: flex;
  margin-right: 20px;
  padding: 0 5px;
  .examine-qd {
    display: flex;
    flex-direction: column;
    align-items: center;
    .circle-img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 40px;
      }
    }
    .circle {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      background-color: #1267fa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .circleIcon {
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.timeS {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
}
.vxeI {
  font-size: 20px;
  cursor: pointer;
}
/deep/ .el-dialog {
  max-height: 850px;
  overflow: auto;
}
</style>